<template>
	<view class="wrap-item flex align-center just-between row-item" v-if="item">
		<view class="title-bg f-30 flex">
			<view class="must" v-if="item.require">*</view>

			<view class="title">{{ item.title }}</view>
		</view>

		<block v-if="item.mode === 'multiSelector'">
			<picker mode="multiSelector" :range="list" :range-key="item.rangeKey" @columnchange="onColumnChange"
				@change="onChange($event)">
				<view class="wrap-right flex align-center just-end">
					<view class="f-30 input flex align-center just-end">
						<view class="place" v-if="showName === ''">{{item.place}}</view>
						
						<view v-else class="limit-num-line">{{showName}}</view>
					</view>
						

					<image v-if="item.isArrow" class="arrow" :src="$staticImagePath('publish/arrow_right.png')" />
				</view>
			</picker>
		</block>

		<block v-else>
			<picker :mode="item.mode" :range="item.list" :range-key="item.rangeKey || ''" @change="onChange($event)">
				<view class="wrap-right flex align-center just-end">
					<view class="input f-30 flex align-center just-end">
						<view class="place" v-if="value === ''">{{item.place}}</view>
						
						<view v-else class="limit-num-line">{{item.rangeKey && item.rangeKey !== '' ? getListValueText() : value}}</view>
					</view>
						

					<image v-if="item.isArrow" class="arrow" :src="$staticImagePath('publish/arrow_right.png')" />
				</view>
			</picker>
		</block>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 输入框的值
			 */
			value: {
				type: String,
				default: "",
			},
			/**
			 * 数据
			 */
			item: {
				type: Object,
				default: null,
			},
		},
		data() {
			return {
				list: [],

				showName: "",
			};
		},
		watch: {
			item: {
				handler() {
					if (this.item.mode === "multiSelector" && this.item.list.length > 0) {
						if (this.list.length === 0) {
							const level = this.item.level; //一共几级列表
							const next = this.item.next; //下一级列表的key
							var array = [this.item.list];

							for (let i = 1; i < level; i++) {
								const before = array[i - 1];

								if (before.length > 0) {
									const nextList = before[0][next];
									array.push(nextList);
								} else {
									array.push([]);
								}
							}
							
							this.list = array;
							
							for (let i = 1; i < level; i++) {
								const beforeList = this.list[i - 1];
								const nextList = this.list[i];
								const index = beforeList.findIndex((subItem) => subItem.id == this.value);
								
								if (nextList.length === 0 && index > -1) {
									this.showName = beforeList[index][this.item.rangeKey];
									return;
								}
								if (i === level - 1 && index > -1) {
									this.showName = nextList[index][this.item.rangeKey];
								}
							}
						}
					}
				},
				immediate: true,
			},
		},
		methods: {
			/**
			 * 每列选择
			 */
			onColumnChange(e) {
				const column = e.detail.column;
				const row = e.detail.value;

				const first = this.list[0];

				switch (column) {
					case 0: //改变一级分类
						const second = this.list[0][row].children;
						const three = second.length > 0 ? second[0].children : [];

						this.$set(this.list, 1, this.list[0][row].children);
						this.$set(this.list, 2, three);

						break;
					case 1: //改变二级分类
						this.$set(this.list, 2, this.list[1][row].children);
						break;
				}
			},
			/**
			 * 选择
			 */
			onChange(e) {
				if (this.item.mode === "date") {
					this.$emit("input", e.detail.value);
				} else if (this.item.mode === "selector") {
					if (this.item.rangeKey && this.item.rangeKey !== "") {
						this.$emit("input", this.item.list[e.detail.value].id);
					} else {
						this.$emit("input", this.item.list[e.detail.value]);
					}
				} else if (this.item.mode === "region") {
					this.$emit("input", e.detail.value.join("/"));
				} else if (this.item.mode === "time") {
					this.$emit("input", e.detail.value);
				} else if (this.item.mode === "multiSelector") {
					const level = this.item.level;

					for (let i = 1; i < level; i++) {
						const index = e.detail.value[i - 1];
						const beforeList = this.list[i - 1];
						const nextList = this.list[i];
						if (nextList.length === 0) {
							this.$emit("input", beforeList[index].id);
							this.showName = beforeList[index][this.item.rangeKey];
							return;
						}
						if (i === level - 1) {
							this.$emit("input", nextList[index].id);
							this.showName = nextList[index][this.item.rangeKey];
						}
					}
				}
			},
			/**
			 * 获取数组中的值
			 */
			getListValueText() {
				if (this.value === "") {
					return "";
				} else {
					const index = this.item.list.findIndex((item) => item.id == this.value);
					return index === -1 ? '' : this.item.list[index][this.item.rangeKey];
				}
			},
		},
	};
</script>

<style>
	@import "@/css/publish.css";

	.wrap-right {
		gap: 10rpx;
	}
</style>